<template>
  <div class="pad20">
    <div>
      <el-form :inline="true" size="mini">
        <el-form-item>
        </el-form-item>
        <el-form-item label="课程名称：">
          <el-input v-model.trim="map.courseName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
          <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
          <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="handleAddRow()">添加
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table v-loading="ctrl.loading" size="medium" :data="list" stripe border style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="course_name" label="课程名称" width="250">
        </el-table-column>
        <el-table-column label="所属分类" width="200">
          <template slot-scope="scope">
            {{scope.row.yj}}/{{scope.row.ej}}
          </template>
        </el-table-column>
        <el-table-column
          width="170"
          label="状态"
          align="center">
          <template slot-scope="scope">
            <span>{{textIsStatus[scope.row.status]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="zksort" label="排序" width="100">
        </el-table-column>
        <el-table-column prop="add_time" label="添加时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="250">
          <template slot-scope="scope">
            <el-button type="danger" @click="handleDelRow(scope.row)" size="mini">删除</el-button>
            <el-button type="success" @click="handleUpdateRow(scope.row)" size="mini">排序</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mgt20">
        <el-pagination
          background
          style="float: right;margin-top: 20px; margin-bottom: 22px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-size="page.size"
          :page-sizes="[2,3,4]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
        <add :visible="ctrl.addDialogVisible" :zid="zid" :title="ctrl.dialogTitle"
             @close-callback="closeCallback"></add>
        <edit :visible="ctrl.editDialogVisible" :formData="formData" :title="ctrl.dialogTitle"
              @close-callback="closeCallback"></edit>
      </div>
    </div>
  </div>
</template>
<script>
  // import * as api from '@/api/homepage'
  import Add from './add'
  import Edit from './edit'

  export default {
    components: {Add, Edit},
    data() {
      return {
        ctrl: {
          loading: false,
          addDialogVisible: false,
          editDialogVisible: false
        },
        map: {courseName: ""},
        formData: {},
        // 表单数据, 例如新增编辑子项，页面表单
        zid: '',
        list: [],
        textIsStatus: {
          0: '上架',
          1: '下架',
          2: '待审核',
          3: '审核成功',
          4: '审核失败',
        },
        page: {
          current: 1,
          size: 2,
          total: 0
        }
      }
    },
    mounted() {
      this.map.zid = this.$route.query.zid
      this.getList(this.map)
    },
    methods: {
      handleChangeStatus(id, statusId) {
        const title = {0: '禁用', 1: '启用'}
        this.$confirm(`确定要${title[statusId]}吗?`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.ctrl.loading = true
          this.changeStatus(id, statusId)
        }).catch(() => {
          this.reload()
        })
      },
      //改变状态
      changeStatus(id, statusId) {
        /*api.zoneCourseUpdate({ id, statusId }).then(res => {
          this.ctrl.loading = false
          if (res.code === 200 && res.data > 0) {
            const msg = { 0: '禁用成功', 1: '启用成功' }
            this.$message({
              type: 'success',
              message: msg[statusId]
            });
            this.reload()
          } else {
            const msg = { 0: '禁用失败', 1: '启用失败' }
            this.$message({
              type: 'error',
              message: msg[statusId]
            });
          }
          this.reload()
        }).catch(() => {
          this.ctrl.loading = false
          this.reload()
        })*/
      },
      //新增
      handleAddRow(zoneId) {
        this.zid = this.$route.query.zid
        this.ctrl.dialogTitle = '新增'
        this.ctrl.addDialogVisible = true
      },
      //删除
      handleDelRow(data) {
        this.$confirm(`确定删除这条数据?`, '我要删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.map = {
            zkid: data.zkid
          }
          this.ctrl.loading = true
          this.$axios.get(`education-system/sys/zonecourse/zoneCourseDelete/${this.map.zkid}`).then(r => {
            this.ctrl.loading = false
            if (r.status == 200 && r.data.obj == true) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //刷新table
              this.reload();
            } else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
          }).catch(() => {
            this.ctrl.loading = false
          })
        }).catch(() => {
        })
      },
      // 关闭编辑弹窗回调
      closeCallback() {
        this.ctrl.dialogVisible = false
        this.ctrl.addDialogVisible = false
        this.ctrl.editDialogVisible = false
        this.reload()
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`)
        this.page.size = val
        this.page.current = 1
        this.getList()
      },
      handleCurrentChange(val) {
        this.page.current = val
        this.getList()
        // console.log(`当前页: ${val}`)
      },
      // 查询
      handleCheck() {
        this.page.current = 1
        this.getList()
      },
      // 重置查询条件
      handleReset() {
        this.page.current = 1;
        this.reload()
      },
      reload() {
        this.formData = {}
        this.map = {}
        this.getList()
      },
      //编辑
      handleUpdateRow(data) {
        this.formData = data
        this.ctrl.dialogTitle = data.course_name + '——编辑'
        this.ctrl.editDialogVisible = true
      },
      getList() {
        this.ctrl.loading = true
        this.map.zid = this.$route.query.zid
        this.$axios.get(`education-system/sys/zonecourse/getZoneCourseByPage?page=${
          this.page.current}&limit=${this.page.size}&courseName=${
          this.map.courseName}&zid=${
          this.map.zid}`).then(d => {
          // console.log(d);
          this.list = d.data.obj.records;
          this.page.total = d.data.obj.total;
          this.ctrl.loading = false
        }).catch(() => {
          this.ctrl.loading = false
        })
      }
    }
  }
</script>
